<%--
  Created by IntelliJ IDEA.
  User: lanou
  Date: 18/1/23
  Time: 下午2:59
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page isELIgnored="false" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Carousel Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->


    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <!-- Custom styles for this template -->
    <link href="carousel.css" rel="stylesheet">
</head>
<body>
<div class="navbar-wrapper">
    <div class="container">

        <nav class="navbar navbar-inverse navbar-fixed-top">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
                            aria-expanded="false" aria-controls="navbar">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="#">用户信息</a>
                </div>
                <div id="navbar" class="navbar-collapse collapse">
                    <form class="navbar-form navbar-right" action="/ajax/login" method="post" id="form1">
                        <%--<button type='button' class='btn btn-success'>欢迎${uname}!!</button>--%>
                        <span style="color : white">欢迎${uname}</span>
                        <span style="color : white">您的余额：</span> <span style="color : white" id="yue">${money}</span>
                        <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"
                                data-whatever="@mdo" id="zhuce">充值
                        </button>
                        <button type='button' class='btn btn-success' id="quit">退出</button>
                    </form>
                </div><!--/.navbar-collapse -->
            </div>
        </nav>

    </div>
</div>


<!-- Carousel
================================================== -->
<div id="myCarousel" class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
        <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
        <li data-target="#myCarousel" data-slide-to="1"></li>
        <li data-target="#myCarousel" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner" role="listbox">

        <div class="item active">
            <img class="first-slide" src="../../img/${img1}.jpg" alt="First slide" style="width: 100%;height: 60% ">
            <div class="container">
                <div class="carousel-caption">
                    <h1>一生钟爱一个金克斯</h1>
                    <%--<p><a class="btn btn-lg btn-primary" href="#" role="button">Sign up today</a></p>--%>
                </div>
            </div>
        </div>
        <div class="item">
            <img class="second-slide" src="../../img/${img2}.jpg" alt="Second slide" style="height: 60% ; width: 100%">
            <div class="container">
                <div class="carousel-caption">
                    <h1>blablabla~</h1>
                    <%--<p><a class="btn btn-lg btn-primary" href="#" role="button">Learn more</a></p>--%>
                </div>
            </div>
        </div>
        <div class="item">
            <img class="third-slide" src="../../img/${img3}.jpg" alt="Third slide" style="width: 100% ;height: 60%">
            <div class="container">
                <div class="carousel-caption">
                    <h1>抱走萝莉~~</h1>

                    <p><a6 class="btn btn-lg btn-primary" href="#" role="button">Browse gallery</a6></p>
                </div>
            </div>
        </div>
    </div>
    <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div><!-- /.carousel -->


<!-- Marketing messaging and featurettes
================================================== -->
<!-- Wrap the rest of the page in another container to center all the content. -->

<div class="container marketing">

    <!-- Three columns of text below the carousel -->
    <div class="row">
        <div class="col-lg-4">
            <img class="img-circle"
                 src="../../img/${img2}.jpg"
                 alt="Generic placeholder image" width="140" height="140">
            <h2>道具~</h2>
            <p>Donec sed odio dui. Etiam porta sem malesuada magna mollis euismod. Nullam id dolor id nibh ultricies
                vehicula ut id elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Praesent commodo
                cursus magna.</p>
            <p><a class="btn btn-default" href="/pifu?name=dj" role="button">道具 &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <img class="img-circle"
                 src="../../img/${img1}.jpg"
                 alt="Generic placeholder image" width="140" height="140">
            <h2>英雄~</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras
                mattis consectetur purus sit amet fermentum. Fusce dapibus, tellus ac cursus commodo, tortor mauris
                condimentum nibh.</p>
            <p><a class="btn btn-default" href="/pifu?name=yx" role="button">英雄 &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
        <div class="col-lg-4">
            <img class="img-circle"
                 src="../../img/${img3}.jpg"
                 alt="Generic placeholder image" width="140" height="140">
            <h2>皮肤</h2>
            <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula
                porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut
                fermentum massa justo sit amet risus.</p>
            <p><a class="btn btn-default" href="/pifu?name=pf" role="button">皮肤 &raquo;</a></p>
        </div><!-- /.col-lg-4 -->
    </div><!-- /.row -->


    <!-- START THE FEATURETTES -->

    <hr class="featurette-divider">

    <div class="row featurette">
        <div class="col-md-7">
            <h2 class="featurette-heading">一生钟爱一个金克斯~ <span
                    class="text-muted">暴走萝莉--金克斯</span></h2>
            <p class="lead">
                ${d1} <%--暴走萝莉·金克丝是网络游戏《英雄联盟》中的一位英雄。她是英雄联盟历史上第一个拥有自己的宣传视频的英雄。--%>
                <%--金克丝活着就是为了不计后果的四处肆虐，在她身后留下的只有一片混乱与恐慌。--%>
                <%--她是一名暴躁而残忍的罪犯，她蔑视一切仅仅是因为无聊，她会在她认为最无趣的地方：皮尔特沃夫，欢乐地进行带着她烙印的肆虐，以引起混乱。--%>
                <%--她携带着兵工厂里的致命玩具，她引发着最闪耀而响亮的爆炸——这也是为了引起倒霉的当局的震惊与注意。金克丝总是能够逍遥法外，她最爱的游戏就是戏弄皮城的警察——尤其是蔚。</p>--%>
        </div>
        <div class="col-md-5">
            <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto"
                 alt="Generic placeholder image" src="../../img/${img1}.jpg">
        </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
        <div class="col-md-7 col-md-push-5">
            <h2 class="featurette-heading">我是该让你们的心跳加快呢~<span class="text-muted">九尾妖狐-阿狸</span>
            </h2>
            <p class="lead">  <%--九尾妖狐是一个高技能伤害的英雄，她可以不断在团战边缘游走并且凭借自己短CD的技能持续输出伤害。 并且漂亮的法师型刺客，声音甜美销魂，身材苗条性感，是造型控的首选之一。--%>
                ${d2} <%--跟其他游荡在艾欧尼亚南部丛林中的狐狸不同，阿狸总觉得她跟魔法世界有一种说不清道不明的联系，一种不完整的联系。在内心深处，她觉得她难以适应这具生而 拥有的肉体，梦想有一天可以变成人类。这个梦想看起来遥不可及，直到有一天人类战场上发生的事情改变了她。--%>
            </p>
        </div>
        <div class="col-md-5 col-md-pull-7">
            <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto"
                 alt="Generic placeholder image" src="../../img/${img2}.jpg">
        </div>
    </div>

    <hr class="featurette-divider">

    <div class="row featurette">
        <div class="col-md-7">
            <h2 class="featurette-heading">再烦我就打你哟！ <span class="text-muted">黑暗之女-安妮</span></h2>
            <p class="lead"> <%--她的母亲是一位灰色魔女，她的父亲是一名神秘的术士，这个孩子的血液里流淌着惊人的秘法能量。她两岁时就用魔法驯服了一头森林里的凶猛暗影熊，将它作为宠物一直到现在。--%>
                <%--　　在战争协会内部的庭院里，安妮顽皮好奇地过着无拘无束的日子。她嬉笑玩闹，和其他同龄女孩儿一样玩打扮游戏。但不要被表象迷惑，在战场上，保卫者们遇见的是另一个安妮，充满灰色魔女的愤怒和秘法能量。--%>
                ${d3} <%--诺克萨斯里总会有人不同意诺克萨斯最高指挥部的所作所为。诺克萨斯最高指挥部刚镇压了自称王储的瑞斯卡里奥发动的政变。他们正准备镇压任何对新政府有异议的行动或组织。这群称作灰色秩序的政治与社会的放逐者，试图安静地离开他们的邻居，因为他们追求的是黑暗的秘术知识。--%>
            </p>
        </div>
        <div class="col-md-5">
            <img class="featurette-image img-responsive center-block" data-src="holder.js/500x500/auto"
                 alt="Generic placeholder image" src="../../img/${img3}.jpg">
        </div>
    </div>

    <hr class="featurette-divider">

    <!-- /END THE FEATURETTES -->


    <!-- FOOTER -->
    <footer>
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>&copy; 2016 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>

    </footer>
</div><!-- /.container -->

<%--模态框--%>
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">请填写充值金额 </h4>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="recipient-name" class="control-label">金额:</label>
                        <input type="text" class="form-control" id="recipient-name" name="jine">
                    </div>

                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" data-dismiss="modal" id="register">Register</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $(document).ready(function () {
        $("#register").on("click", function () {

            var jine = $("[name=jine]").val();
            $.ajax({

                type: "post",
                url: "/ajax/recharge",
                data: {jine: jine},
                success: function (data) {
                    alert("充值成功");
                    location.reload();

                },
                error: function (data) {
                    alert("错误了");
                }


            })

        })
    })


</script>
</body>
</html>
